import * as React from 'react';
import { IStyleSet, ILabelStyles, useTheme } from '@fluentui/react';
import { Iroot } from '../interface';
import Alymodel from '../../mysql_interface/model';

const labelStyles: Partial<IStyleSet<ILabelStyles>> = {
  root: { marginTop: 10 },
};

interface P extends Iroot {
  selectedKey?: number | 'all'
  setSelectedKey(str?: 'all' | number): void
  getCatebagtype: Alymodel.IMcatebagtype[]
}

const styles: React.CSSProperties = {
  height: 80,
  borderRadius: 2,
  backgroundColor: '#ffffff',
  lineHeight: '80px',
  marginTop: '-40px',
  zIndex: 10,
}

export const Nav2: React.FunctionComponent<P> = (p) => {
  const { setSelectedKey, selectedKey, getCatebagtype } = p
  const theme = useTheme()
  return (
    <div className="container-xxl" >
      <div className="row m-0">
        <div className="col" style={{ ...styles, boxShadow: theme.effects.elevation4 }}>
          <div className="btn-group" role="group" aria-label="Second group">
            <button type="button" disabled className="btn">类别：</button>
            <button type="button" onClick={() => setSelectedKey('all')} className={selectedKey === 'all' ? "btn btn-dark br-2" : 'btn btn1 '}>全部</button>
            {
              getCatebagtype.map((e, k) => {
                return (
                  <button key={k} type="button" onClick={() => setSelectedKey(e.ID)} className={selectedKey === e.ID ? "btn btn-dark br-2" : 'btn btn1'}>{e.name}</button>
                )
              })
            }
          </div>
        </div>
      </div>
    </div>
  );
};
